import Taro from "@tarojs/taro"
import { View } from '@tarojs/components';
import { observer } from 'mobx-react'
import AppJson from "@/app.config";
import { deepClone } from '@/path/tool/until';
import { BaseRouter } from "@path/router"
import React, { useEffect, useRef } from "react"
import { XmImage } from "..";
const tabbarImages = require.context('@/static/images/tabBar', true, /\.(png)$/);


import './index.scss'

/** 底部导航栏组件二次封装*/
function Index() {
  const tabBarConfig = useRef(deepClone(AppJson)?.tabBar)
  const _list = useRef(tabBarConfig.current?.list || [])
  const _nowpage = (function () { const _p = Taro.getCurrentPages(); return _p[_p.length > 0 ? _p.length - 1 : 0] })()
  const nowPage = useRef(_nowpage);
  function onRouter(url: string) {
    BaseRouter.switch({
      url: `/${url}`
    })
  }
  useEffect(() => {
    if (Taro.ENV_TYPE.ALIPAY === Taro.getEnv()) {
      Taro.hideTabBar()
    }
  }, [])
  const _current = e => e.pagePath === nowPage.current.route
  const _path = (e: string) => tabbarImages(e.replace("static/images/tabBar", "."))
  return (
    <View className='xm-tabbar'>
      <View className="tabbar-content">
        {_list.current.map((val, i) => (
          <View key={i} className='xm-tabbar-item s-md flex-center' onClick={() => onRouter(val.pagePath)}>
            <XmImage src={_current(val) ? _path(val.selectedIconPath) : _path(val.iconPath)} size={36} static></XmImage>
            <View className="text" style={`color: ${_current(val) ? tabBarConfig.current.selectedColor : tabBarConfig.current.color};`}>{val.text}</View>
          </View>
        ))}
      </View>
      <View className="iphonex-bottom tabbar-btm"></View>
    </View>
  )
}

export default React.memo(observer(Index))